<template>

    <el-container class="container">
        <el-main class="main-container">
            <el-card>
                <template #header>
                    <div style="text-align: center;">
                        <h2>{{ blog.title }}</h2>
                        <div>
                            <span style="margin-right: 20px;'">作者:{{ blog.author_name }}</span>
                        </div>
                    </div>
                </template>
                <template #default>
                    <div v-html="blog.content" class="content"></div>
                </template>
            </el-card>
            <el-card>

                <template #default>
                    <div>
                        <h3>
                            评论
                        </h3>
                    </div>
                    <div>
                        <el-input v-model="input" style="width: 240px" placeholder="请输入评论" />
                        <el-button type="primary" @click="sendComment">评论</el-button>
                    </div>
                    <div v-for="comment in blog.comments" :key="comment.id" class="blog-item">
                        <p class="comment-title">{{ comment.author_name }}</p>
                        <p class="comment-content">{{ comment.content }}</p>
                        <div class="comment-footer">
                            <span class="pub-time">{{ dateformat.stringFromDateTime(comment.pub_time) }}</span>
                        </div>
                    </div>
                </template>
            </el-card>
        </el-main>
    </el-container>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import BlogHttp from '@/api/BlogHttp';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import dateformat from '@/utils/dateformat';
import Header from '@/components/Header.vue'
const route = useRoute();
const input = ref(''); 
const blog = reactive({}); 
const activeIndex = ref('0')

const handleSelect = (key) => {
    if (key === '0') {
        router.push({ name: 'home' })
    }
}
onMounted(async () => {
    try {
        const pk = route.params.pk
        console.log(pk)
        let data = await BlogHttp.getBlogDetail(pk)
        Object.assign(blog, data)
    } catch (detail) {
        ElMessage.error("获取博客详情失败")
    }

})
const sendComment = async () => {
    try {
        if (!input.value.trim()) {
            ElMessage.warning('评论内容不能为空');
            return;
        }
        const data = { content: input.value }
        const comment = await BlogHttp.SubmitComment(route.params.pk, data);
        if (!blog.comments) {
            blog.comments = [];
        }
        blog.comments.unshift(comment);
        input.value = '';
    } catch (e) {
        ElMessage.error("请先登录")
    }
}
</script>
<style scoped>
.main-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 减小列表项之间的间距 */
    padding: 16px;
    margin: 0 auto;
    width: min(800px, 90%);
}
/* 暗黑模式样式 */
:root.dark .el-card {
    --el-card-bg-color: var(--el-bg-color);
    border-color: var(--el-border-color-darker);
}

:root.dark .content {
    color: var(--el-text-color-primary);
}

:root.dark .blog-item {
    background-color: var(--el-bg-color-darker);
    border-color: var(--el-border-color-darker);
}

:root.dark .comment-title {
    color: var(--el-text-color-primary);
}

:root.dark .comment-content {
    color: var(--el-text-color-regular);
}

:root.dark .pub-time {
    color: var(--el-text-color-secondary);
}
</style>